<template name="graceFullLoading">
	<view class="grace-flex-center grace-flex-vcenter grace-full-loading" v-if="graceFullLoading" @tap.stop="stopFun" @touchmove.stop="stopFun">
			<view class="spinner">
				<view class="spinner-container container1">
					<view class="circle1"></view>
					<view class="circle2"></view>
					<view class="circle3"></view>
					<view class="circle4"></view>
				</view>
				<view class="spinner-container container2">
					<view class="circle1"></view>
					<view class="circle2"></view>
					<view class="circle3"></view>
					<view class="circle4"></view>
				</view>
				<view class="spinner-container container3">
					<view class="circle1"></view>
					<view class="circle2"></view>
					<view class="circle3"></view>
					<view class="circle4"></view>
				</view>
			</view>
			<view class="text">{{text}}</view>
		</view>
</template>
<script>
	export default {
		name: "graceFullLoading",
		props: {
			graceFullLoading: {
				type: Boolean,
				default: false
			},
			logoUrl: {
				type: String,
				default: ""
			},
			text: {
				type: String,
				default: "正在加载中 ..."
			}
		},
		methods: {
			stopFun: function() {
				return false;
			}
		}
	}
</script>
<style>
	.grace-full-loading {
		display:flex; 
		flex-direction:column;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		background: #FFFFFF;
		position: fixed;
		z-index: 99;
		left: 0;
		top: 0;
	}

	.grace-full-loading .content {
		width: 300rpx;
		height: auto;
		position: absolute;
		z-index: 100;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		/* animation: grace-fade 3500ms infinite linear; */
		/* opacity: 0.6; */
		padding: 10rpx;
	}

	.grace-full-loading .text {
		line-height: 1.5em;
		font-size: 28upx;
		margin-top: 20upx;
		text-align: center;
	}

	.spinner {
		width: 60upx;
		height: 60px;
		position: relative;
	}

	.container1>view,
	.container2>view,
	.container3>view {
		width: 20upx;
		height: 20upx;
		background-color: #19b552;

		border-radius: 100%;
		position: absolute;
		-webkit-animation: bouncedelay 1.2s infinite ease-in-out;
		animation: bouncedelay 1.2s infinite ease-in-out;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
	}

	.spinner .spinner-container {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.container2 {
		-webkit-transform: rotateZ(45deg);
		transform: rotateZ(45deg);
	}

	.container3 {
		-webkit-transform: rotateZ(90deg);
		transform: rotateZ(90deg);
	}

	.circle1 {
		top: 0;
		left: 0;
	}

	.circle2 {
		top: 0;
		right: 0;
	}

	.circle3 {
		right: 0;
		bottom: 0;
	}

	.circle4 {
		left: 0;
		bottom: 0;
	}

	.container2 .circle1 {
		-webkit-animation-delay: -1.1s;
		animation-delay: -1.1s;
	}

	.container3 .circle1 {
		-webkit-animation-delay: -1.0s;
		animation-delay: -1.0s;
	}

	.container1 .circle2 {
		-webkit-animation-delay: -0.9s;
		animation-delay: -0.9s;
	}

	.container2 .circle2 {
		-webkit-animation-delay: -0.8s;
		animation-delay: -0.8s;
	}

	.container3 .circle2 {
		-webkit-animation-delay: -0.7s;
		animation-delay: -0.7s;
	}

	.container1 .circle3 {
		-webkit-animation-delay: -0.6s;
		animation-delay: -0.6s;
	}

	.container2 .circle3 {
		-webkit-animation-delay: -0.5s;
		animation-delay: -0.5s;
	}

	.container3 .circle3 {
		-webkit-animation-delay: -0.4s;
		animation-delay: -0.4s;
	}

	.container1 .circle4 {
		-webkit-animation-delay: -0.3s;
		animation-delay: -0.3s;
	}

	.container2 .circle4 {
		-webkit-animation-delay: -0.2s;
		animation-delay: -0.2s;
	}

	.container3 .circle4 {
		-webkit-animation-delay: -0.1s;
		animation-delay: -0.1s;
	}

	@-webkit-keyframes bouncedelay {

		0%,
		80%,
		100% {
			-webkit-transform: scale(0.0)
		}

		40% {
			-webkit-transform: scale(1.0)
		}
	}

	@keyframes bouncedelay {

		0%,
		80%,
		100% {
			transform: scale(0.0);
			-webkit-transform: scale(0.0);
		}

		40% {
			transform: scale(1.0);
			-webkit-transform: scale(1.0);
		}
	}
</style>
